<template>
  <div class="profile-setup-container">
    <el-card class="setup-card">
      <h2>完善个人信息</h2>
      <p>请填写您的个人简介等信息。</p>

      <el-form label-position="top">
        <el-form-item label="用户账户">
           <el-input :value="userAccount" disabled></el-input>
        </el-form-item>

        <!-- Two-column grid for profile details -->
        <div class="profile-grid">
           <el-form-item label="姓名">
            <el-input v-model="name" placeholder="请输入姓名"></el-input>
          </el-form-item>

           <el-form-item label="年龄">
              <el-input-number v-model="age" :min="0" :max="120" placeholder="请输入年龄" style="width: 100%;"></el-input-number>
          </el-form-item>

           <el-form-item label="职业">
             <el-select
               v-model="occupation"
               filterable
               allow-create
               default-first-option
               :reserve-keyword="false"
               placeholder="请选择或输入职业"
               style="width: 100%;"
             >
               <el-option
                 v-for="item in occupationOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               />
             </el-select>
          </el-form-item>

           <el-form-item label="性别">
             <el-select v-model="gender" placeholder="请选择性别" style="width: 100%;">
               <el-option label="男" value="男"></el-option>
               <el-option label="女" value="女"></el-option>
             </el-select>
          </el-form-item>

           <el-form-item label="爱好">
             <el-select
               v-model="hobbies"
               multiple
               filterable
               allow-create
               default-first-option
               :reserve-keyword="false"
               placeholder="请选择或输入爱好"
               style="width: 100%;"
             >
               <el-option
                 v-for="item in hobbyOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
               />
             </el-select>
          </el-form-item>

          <el-form-item label="恋爱状态">
            <el-select v-model="loveStatus" placeholder="请选择恋爱状态" style="width: 100%;">
              <el-option label="单身" value="单身"></el-option>
              <el-option label="恋爱" value="恋爱"></el-option>
              <el-option label="已婚" value="已婚"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="profile" placeholder="请介绍一下自己" :rows="4"></el-input>
        </el-form-item>

        <!-- 可以根据需要添加更多字段，例如头像上传、生日等 -->

        <el-form-item>
          <el-button type="primary" @click="completeSetup">完成</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { login } from '../state/auth';
import { setUserData } from '../state/user';
import { ElMessage } from 'element-plus';
import {updateUserInfoAPI} from "../api/user/user.js";

const router = useRouter();
const route = useRoute();

// 从路由参数中获取用户账户 (如果需要)
const userAccount = route.params.userAccount; // 假设从上一步传递过来

const name = ref('');
const age = ref(0);
const occupation = ref('');
const gender = ref('');
const hobbies = ref([]);
const profile = ref('');
const loveStatus = ref('');

// 默认爱好选项
const hobbyOptions = [
  { label: '阅读', value: '阅读' },
  { label: '音乐', value: '音乐' },
  { label: '运动', value: '运动' },
  { label: '旅行', value: '旅行' },
  { label: '编程', value: '编程' },
];

// 默认职业选项 (越多越好)
const occupationOptions = [
  { label: '学生', value: '学生' },
  { label: '教师', value: '教师' },
  { label: '工程师', value: '工程师' },
  { label: '医生', value: '医生' },
  { label: '律师', value: '律师' },
  { label: '设计师', value: '设计师' },
  { label: '销售', value: '销售' },
  { label: '市场营销', value: '市场营销' },
  { label: '产品经理', value: '产品经理' },
  { label: '运营', value: '运营' },
  { label: '人力资源', value: '人力资源' },
  { label: '会计', value: '会计' },
  { label: '金融分析师', value: '金融分析师' },
  { label: '自由职业者', value: '自由职业者' },
  { label: '个体户', value: '个体户' },
  { label: '服务员', value: '服务员' },
  { label: '厨师', value: '厨师' },
  { label: '司机', value: '司机' },
  { label: '工人', value: '工人' },
  { label: '管理人员', value: '管理人员' },
  { label: '科研人员', value: '科研人员' },
  { label: '艺术家', value: '艺术家' },
  { label: '作家', value: '作家' },
  { label: '编辑', value: '编辑' },
  { label: '记者', value: '记者' },
  { label: '程序员', value: '程序员' },
  { label: '测试工程师', value: '测试工程师' },
  { label: '数据分析师', value: '数据分析师' },
  { label: '数据科学家', value: '数据科学家' },
  { label: '运维工程师', value: '运维工程师' },
  { label: '架构师', value: '架构师' },
  { label: '咨询师', value: '咨询师' },
  { label: '摄影师', value: '摄影师' },
  { label: '摄像师', value: '摄像师' },
  { label: '翻译', value: '翻译' },
  { label: '导游', value: '导游' },
  { label: '健身教练', value: '健身教练' },
  { label: '营养师', value: '营养师' },
  { label: '心理咨询师', value: '心理咨询师' },
  { label: '社工', value: '社工' },
  { label: '图书管理员', value: '图书管理员' },
  { label: '档案管理员', value: '档案管理员' },
  { label: '博物馆策展人', value: '博物馆策展人' },
  { label: '空乘', value: '空乘' },
  { label: '飞行员', value: '飞行员' },
  { label: '警察', value: '警察' },
  { label: '消防员', value: '消防员' },
  { label: '军人', value: '军人' },
  { label: '政府公务员', value: '政府公务员' },
  { label: '非营利组织工作者', value: '非营利组织工作者' },
  { label: '退休', value: '退休' },
  { label: '无业', value: '无业' }
];

const completeSetup = async () => {
  // 在实际应用中：
  // 1. 校验个人信息输入
  if (!name.value){
    ElMessage.error('请填写姓名');
    return;
  }
  if (age.value < 0 || age.value > 200){
    ElMessage.error('请确认年龄');
    return;
  }
  if (!occupation.value){
    ElMessage.error('请选择或输入职业');
    return;
  }
  if (!gender.value){
    ElMessage.error('请选择性别');
    return;
  }
  if (!hobbies.value.length){
    ElMessage.error('请选择或输入爱好');
    return;
  }
  if (!profile.value){
    ElMessage.error('请填写个人简介');
    return;
  }
  if (!loveStatus.value){
    ElMessage.error('请选择恋爱状态');
    return;
  }
  // 2. 调用后端接口保存个人信息，传递 userAccount, name.value, age.value, occupation.value, gender.value, hobbies.value, profile.value, nickname.value 等
  const data = {
    name: name.value,
    age: age.value,
    occupation: occupation.value,
    gender: gender.value,
    hobbies: hobbies.value.join(','),
    profile: profile.value,
    loveStatus: loveStatus.value,
  };
  console.log(data);
  const res = await updateUserInfoAPI(data);
  if (res.code === 200) {
    // 模拟完成设置并登录
    login(); // 模拟登录状态
    ElMessage.success('个人信息设置成功，登录成功！');
    router.push('/home'); // 跳转到主页
  }
};
</script>

<style scoped>
.profile-setup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1a1a2e; /* Match background */
  padding: 20px;
}

.setup-card {
  width: 600px; /* Adjust width as needed */
  max-width: 95%;
  padding: 30px;
  border-radius: 12px;
  background-color: #2a2a40; /* Match card background */
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid #404060;
  text-align: center;
}

.setup-card h2 {
    color: #66b1ff;
    margin-bottom: 20px;
}

.setup-card p {
    color: #b3b3b3;
    margin-bottom: 30px;
}

/* Style for the two-column grid */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 20px; /* Gap between grid items */
  width: 100%; /* Take full width of the form */
}

/* Ensure form items within the grid take full width of their grid cell */
.profile-grid :deep(.el-form-item) {
    width: 100%;
    margin-bottom: 0; /* Remove default bottom margin */
}

/* Add some bottom margin to the grid itself */
.profile-grid {
    margin-bottom: 20px; /* Space between the grid and the next item */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .profile-grid {
    grid-template-columns: 1fr; /* Stack items in a single column */
    gap: 15px; /* Adjust gap for single column */
  }
  
  .profile-grid :deep(.el-form-item) {
      margin-bottom: 0; /* Ensure no extra margin between stacked items */
  }

  .profile-grid {
      margin-bottom: 15px; /* Adjust bottom margin for single column */
  }
}

/* Basic Element Plus overrides for dark theme */
.setup-card :deep(.el-form-item__label) {
    color: #b3b3b3 !important;
}

.setup-card :deep(.el-input__inner) {
    background-color: #ffffff !important; /* White background */
    /* border-color: #404060 !important; */ /* Remove dark border override */
    color: #303133 !important; /* Dark text color */
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important; */ /* Remove inner shadow */
    border-radius: 4px !important; /* Ensure radius matches login */
    border: 1px solid #dcdfe6; /* Add a standard light border */
}

.setup-card :deep(.el-input__inner::placeholder) {
    color: #b3b3b3;
}

.setup-card :deep(.el-input__prefix-inner) {
    color: #b3b3b3; /* Icon color, consistent with FirstLoginSetup */
}

.setup-card :deep(.el-button--primary) {
    width: 100%;
    margin-top: 20px;
}
</style> 